<template>
  <el-form label-position="top" class="p-10">
    <el-form-item label="锚点项">
      <!-- <VW v-model="activeData.extConfig.colums"> -->
        <el-select
          v-model="columsSelected"
          multiple
          collapse-tags
          style="width: 100%;"
          value="object"
          placeholder="请选择">
          <el-option
            v-for="(item, index) in columsOptions"
            :key="index"
            :label="item.label"
            :value="item.componentName">
          </el-option>
        </el-select>
      <!-- </VW> -->
    </el-form-item>
    <el-form-item label="查询条件">
      <VW v-model="activeData.extConfig.condition">
        <el-input
          readonly
          v-model="activeData.extConfig.condition"
          placehoder="绑定变量"
        />
      </VW>
    </el-form-item>
    <el-form-item label="行标题+开始+结束 字段">
      <VW v-model="activeData.extConfig.colTitleField">
        <el-input
          v-model="activeData.extConfig.colTitleField"
          placehoder="+拼接"
        />
      </VW>
    </el-form-item>
  </el-form>
</template>
<script>
import { isArray, cloneDeep } from "lodash"
export default {
  name:'historyProject-config',
  props:['activeData', 'home'],
  data(){
    return {
      columsOptions: [],
    }
  },
  computed:{
    columsSelected: {
      get() {
        if (isArray(this.activeData.extConfig.colums) && this.activeData.extConfig.colums.length > 0) {
          return this.activeData.extConfig.colums.map(i => i.componentName)
        } else {
          return []
        }
      },
      set(val) {
        const data = this.columsOptions.filter(i => val.includes(i.componentName))
        console.log(data,'====set')
        // this.activeData.extConfig.colums = cloneDeep(data)
        this.$set(this.activeData.extConfig, 'colums', cloneDeep(data))
        console.log(this.activeData.extConfig,'===this.activeData.extConfig')
      }
    }
  },
  watch:{
    // 'activeData.extConfig.colums': {
    //   handler(val) {
    //     console.log(val,'===colums')
    //   }
    // }
  },
  mounted() {
    // console.log(this.home,'===home')
    console.log(this.home.drawingList,'===this.home.drawingList')

    let colums = []
    let divider = null
    let children = []
    if (this.home.drawingList[0].children[0] && this.home.drawingList[0].children[0].__config__.tag === 'layoutContainer') {
      children = this.home.drawingList[0].children[0].children[0].children
      this.activeData.extConfig.layout_id = this.home.drawingList[0].children[1].__config__.componentName
      // this.$set(this.activeData.extConfig, 'layout_id_left', this.home.drawingList[0].children[0].__config__.componentName)
      // this.activeData.extConfig.layout_id_left = this.home.drawingList[0].children[0].__config__.componentName
      // console.log(this.activeData.extConfig,'====this.activeData.extConfig')
    } else {
      children = this.home.drawingList
    }
    children.forEach(item => {
      if (isArray(item.children) && item.children.length > 0) {
        const {componentName, tag} = item.children[0].__config__
        if (tag === 'divider') {
          if (divider) {
            console.log(divider,'===divider')
            colums.push(divider)
            divider = null
          }
          divider = {
            componentName,
            label: item.children[0].titleText,
            children: []
          }
        } else if(divider && divider.children) {
          divider.children.push({
            tag,
            __vModel__: item.children[0].__vModel__
          })
        }
      }
    })
    if (divider) {
      colums.push(divider)
    }
    console.log(colums,'===colums2')
    this.columsOptions = cloneDeep(colums)
    if (!this.activeData.extConfig.colums || isArray(this.activeData.extConfig.colums) && (this.activeData.extConfig.colums.length == 0)) {
      this.activeData.extConfig.colums = cloneDeep(colums)
    }
  },
  methods: {
    
  },
}
</script>

<style lang="scss" scoped>

</style>